import AvatarBaozi from '@/assets/avatar-baozi.png';
import AvatarNike from '@/assets/avatar-nike.png';
import AvatarZhuDi from '@/assets/avatar-zhudi.png';
import BusBg from '@/assets/bus-zhudi.png';

export default function BusZhuDi(props: {
  readonly?: boolean;
  readonlyFriend?: boolean;
  selfAvatar?: string;
  friendAvatar?: string;
  onUploadSelfAvatar?: (e: React.ChangeEvent<HTMLInputElement>) => void;
  onUploadFriendAvatar?: (e: React.ChangeEvent<HTMLInputElement>) => void;
}) {
  return (
    <>
      <div className="inline-block relative">
        <img src={BusBg} alt="" />

        {/* zhudi */}
        <img
          src={AvatarZhuDi}
          className=" absolute left-[27.5%] top-[26.5%] w-[7%]"
          alt=""
        />

        {/* nick */}
        <img
          src={AvatarNike}
          className=" absolute left-[35.0%] top-[28%] w-[11%]"
          alt=""
        />

        {/* baozi */}
        <img
          src={AvatarBaozi}
          className=" absolute left-[63.6%] top-[29.8%] w-[13%]"
          alt=""
        />

        {/* self avatar */}
        <div className="w-[9%] aspect-[1/1.30] absolute left-[45.8%] top-[31.1%] overflow-hidden rounded-[50px] flex items-center justify-center">
          {props.selfAvatar && (
            <img
              src={props.selfAvatar}
              className=" w-full h-full block object-contain absolute left-0 top-0 z-10"
            />
          )}
          <span className="text-[5vw] -translate-y-[1px] upload-plus">+</span>
          {!props.readonly && (
            <input
              accept="image/*"
              onChange={(e) =>
                props.onUploadSelfAvatar && props.onUploadSelfAvatar(e)
              }
              type="file"
              className=" absolute left-0 top w-full h-full opacity-0 z-10 participants-upload-input-1"
            />
          )}
        </div>

        {/* upload control */}
        <div className="w-[9%] aspect-[1/1.30] absolute left-[55.6%] top-[31.3%] overflow-hidden rounded-[50px] flex items-center justify-center">
          {props.friendAvatar && (
            <img
              src={props.friendAvatar}
              className=" w-full h-full block object-contain absolute left-0 top-0 z-10"
            />
          )}
          <span className="text-[5vw] -translate-y-[1px] upload-plus">+</span>
          {!props.readonlyFriend && (
            <input
              accept="image/*"
              onChange={(e) =>
                props.onUploadSelfAvatar && props.onUploadSelfAvatar(e)
              }
              type="file"
              className=" absolute left-0 top w-full h-full opacity-0 z-10 participants-upload-input-2"
            />
          )}
        </div>
      </div>
    </>
  );
}
